<script setup>
import {useRoute, useRouter} from "vue-router";
import {storeToRefs} from "pinia";
import Product from "@/components/Shop/Product.vue";
import ShopInfo from "@/components/Home/ShopInfo.vue";
import {useShopInfoStore} from "@/stores/shop.js";
import {ref} from "vue";
import CartBottom from "@/components/Cart/CartBottom.vue";

const shopInfoStore = useShopInfoStore();
const {nearbyList} = storeToRefs(shopInfoStore);
const router = useRouter();
const route = useRoute();
const id = Number(route.params.id);
const shopInfo = ref(nearbyList.value.find(item => item.id === id));
const goBack = () => {
  router.go(-1);
};
function activeOff() {
  shopInfo.value.category.forEach(item => {
    item.active = false;
  })
}

const changeType = (id, index) => {
  product.value = shopInfo.value.category.find(item => item.id === id).list;
  activeOff()
  shopInfo.value.category[index].active = true;
  active = false;
}

let active = true;
const product = ref([]);

function resetProduct() {
  active = true;
  activeOff();
  product.value = [];
  shopInfo.value.category.map(item => {
    item.list.map(item => {
      product.value.push(item)
    })
  })
  shopInfo.value.cartList.sum = 0;
}

resetProduct();
const plusCart=(goodID)=>{
  shopInfoStore.plusNum(goodID,shopInfo)
}

const minusCart=(goodID)=>{
  shopInfoStore.minusNum(goodID,shopInfo)
}
</script>

<template>
  <div class="shop">
    <!-- 搜索 -->
    <div class="search">
      <span class="iconfont search_back" @click="goBack">&#xe697;</span>
      <div class="search_content">
        <span class="iconfont search_content_icon">&#xe632;</span>
        <input type="text" class="search_content_input" placeholder="请输入商品名称">
      </div>
    </div>
    <!-- 商店信息 -->
    <div class="shop_info">
      <ShopInfo :shop-info="shopInfo"/>
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="category">
        <div class="category_item " @click="resetProduct" v-bind:class="active ? 'category_item--active' : '' ">
          全部商品
        </div>
        <div class="category_item" v-for="(item, index) in shopInfo.category" @click="changeType(item.id,index)"
             :class="item.active ? 'category_item--active' : ''">{{ item.name }}
        </div>
      </div>
      <div class="product">
        <div>
          <product :product="product" @plusCart="plusCart" @minusCart="minusCart"/>
        </div>
      </div>
    </div>
    <!-- 购物车底部 -->
<CartBottom/>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";

.shop {
  //搜索
  .search {
    margin: .18rem;
    display: flex;
    align-items: center;

    &_back {
      font-size: .24rem;
      margin-right: .08rem;
      color: #b6b6b6;
    }

    &_content {
      flex: 1;
      height: .32rem;
      background-color: #f5f5f5;
      border-radius: .16rem;
      display: flex;
      align-items: center;

      &_icon {
        color: #b6b6b6;
        margin: 0 .12rem;
      }

      &_input {
        border: none;
        outline: none;
        background: none;
        width: 100%;
        height: .32rem;
      }
    }
  }

  //商店信息
  .shop_info {
    margin: 0 .18rem;
  }

  // 内容
  .content {
    position: absolute;
    left: 0;
    right: 0;
    top: 1.7rem;
    bottom: .5rem;
    display: flex;

    .category {
      overflow-y: scroll;
      width: .78rem;
      background-color: #f5f5f5;

      &_item {
        line-height: .4rem;
        font-size: .14rem;
        text-align: center;
        color: $content_fontcolor;

        &--active {
          background-color: $bgColor;
        }
      }
    }

    .product {
      flex: 1;
      overflow-y: scroll;
    }
  }
}
</style>